<template>
  <div id="app">
    <el-container>
      <el-header class="header">
        <el-menu
          mode="horizontal"
          :ellipsis="false"
          class="main-nav"
        >
          <div class="nav-left">
            <router-link to="/" class="logo">游戏论坛</router-link>
            <el-menu-item index="1">
              <router-link to="/forum">论坛</router-link>
            </el-menu-item>
            <el-menu-item index="2">
              <router-link to="/data">数据</router-link>
            </el-menu-item>
            <el-menu-item index="3">
              <router-link to="/community">社区</router-link>
            </el-menu-item>
          </div>
          <div class="nav-right">
            <el-input
              v-model="searchQuery"
              placeholder="搜索帖子、角色、攻略..."
              class="search-box"
            >
              <template #append>
                <el-button type="primary">搜索</el-button>
              </template>
            </el-input>
            
            <template v-if="!isLoggedIn">
              <el-button type="text" class="mui-btn-text">
                <router-link to="/login">登录</router-link>
              </el-button>
              <el-button type="text" class="mui-btn-text">
                <router-link to="/register">注册</router-link>
              </el-button>
            </template>
            
            <el-dropdown v-else trigger="click" @command="handleCommand">
              <div class="avatar-container">
                <el-avatar 
                  :size="40" 
                  :src="userAvatar"
                  class="avatar"
                >
                  <el-icon><User /></el-icon>
                </el-avatar>
                <span class="username">{{ username }}</span>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">
                    <el-icon><User /></el-icon>个人中心
                  </el-dropdown-item>
                  <el-dropdown-item command="messages">
                    <el-icon><Message /></el-icon>消息
                  </el-dropdown-item>
                  <el-dropdown-item command="settings">
                    <el-icon><Setting /></el-icon>设置
                  </el-dropdown-item>
                  <el-dropdown-item divided command="logout">
                    <el-icon><SwitchButton /></el-icon>退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-menu>
      </el-header>

      <el-main class="main-content">
        <router-view/>
      </el-main>

      <el-footer class="footer">
        <el-row class="footer-content">
          <el-col :span="12">
            <div class="footer-section">
              <h3>关于我们</h3>
              <p>游戏论坛致力于为玩家提供优质的交流平台</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="footer-section">
              <h3>快速链接</h3>
              <el-link type="info" :underline="false">
                <router-link to="/about">关于我们</router-link>
              </el-link>
              <el-link type="info" :underline="false">
                <router-link to="/rules">社区规则</router-link>
              </el-link>
              <el-link type="info" :underline="false">
                <router-link to="/contact">联系我们</router-link>
              </el-link>
            </div>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import { User, Message, Setting, SwitchButton } from '@element-plus/icons-vue'

const router = useRouter()
const store = useStore()
const searchQuery = ref('')

// 使用计算属性获取状态
const isLoggedIn = computed(() => store.getters.isLoggedIn)
const userInfo = computed(() => store.getters.userInfo)
const username = computed(() => userInfo.value?.username || '')
const userAvatar = computed(() => {
  const avatar = userInfo.value?.avatar
  if (avatar) {
    // 如果头像URL不是以http开头，添加基础URL
    return avatar.startsWith('http') ? avatar : `http://localhost:8080${avatar}`
  }
  return 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
})

// 处理下拉菜单命令
const handleCommand = (command: string) => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'messages':
      router.push('/messages')
      break
    case 'settings':
      router.push('/settings')
      break
    case 'logout':
      handleLogout()
      break
  }
}

// 处理登出
const handleLogout = () => {
  store.dispatch('logout')
  ElMessage.success('已退出登录')
  router.push('/login')
}

// 组件挂载时初始化用户状态
onMounted(() => {
  store.dispatch('initUserState')
})
</script>

<style>
#app {
  font-family: 'Microsoft YaHei', Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  min-height: 100vh;
}

:root {
  --primary-color: #1976d2;
  --primary-hover: #1565c0;
  --secondary-color: #fff;
  --border-radius: 8px;
  --shadow: 0 2px 8px rgba(25, 118, 210, 0.08);
}

.header {
  padding: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  background: #fff;
}

.main-nav {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--primary-color);
  text-decoration: none;
  margin-right: 2rem;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.search-box {
  width: 300px;
}

.avatar-container {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.avatar-container:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.avatar {
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.username {
  font-size: 14px;
  color: #333;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-content {
  margin-top: 80px;
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
}

.footer {
  background-color: #f8f9fa;
  padding: 2rem 0;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-section h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.footer-section a {
  color: #666;
  text-decoration: none;
}

.footer-section a:hover {
  color: var(--primary-color);
}

:deep(.el-menu--horizontal) {
  border-bottom: none;
}

:deep(.el-menu-item) {
  height: 60px;
  line-height: 60px;
}

:deep(.el-dropdown-menu__item a) {
  color: inherit;
  text-decoration: none;
}

/* Material UI 风格增强 */
.el-button--primary, .mui-btn-primary {
  background-color: var(--primary-color) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow);
  border: none;
  color: #fff !important;
  font-weight: 500;
  transition: background 0.2s, box-shadow 0.2s;
}
.el-button--primary:hover, .mui-btn-primary:hover {
  background-color: var(--primary-hover) !important;
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.16);
}
.el-button--text, .mui-btn-text {
  color: var(--primary-color) !important;
  border-radius: var(--border-radius) !important;
  font-weight: 500;
}
.el-button--text:hover, .mui-btn-text:hover {
  background: rgba(25, 118, 210, 0.08) !important;
}
.el-input__wrapper {
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow);
  border: 1.5px solid #e3eaf2;
  transition: border 0.2s;
}
.el-input__wrapper.is-focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.08);
}
.el-card {
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow) !important;
  border: none !important;
}
.main-content, .footer-content {
  padding: 32px 24px;
}
.el-card {
  margin-bottom: 24px;
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
}

:deep(.el-dropdown-menu__item .el-icon) {
  margin-right: 4px;
  font-size: 16px;
}

:deep(.el-dropdown-menu__item.is-divided) {
  border-top: 1px solid #eee;
  margin-top: 4px;
  padding-top: 4px;
}

.avatar-uploader {
  width: 400px;
  height: 260px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fafafa;
  transition: border-color 0.3s;
}
</style>
